<template>
	<view class="count">
		<view class="btn jian" @click="calc(-1)"></view>
    <view class="num text-bold">{{value}}</view>
    <view class="btn jia on" @click="calc(1)"></view>
	</view>
</template>

<script>
	export default {
    props: {
      value: {
        type: Number,
        default: 1
      }
    },
		data() {
			return {
				
			};
		},
    methods: {
      calc(num) {
        let result = this.value + num
        if (result) this.update(result)
        else this.onDel()
      },
      update(num) {
        this.$emit('input', num)
      },
      onDel() {
        this.$emit('del', 'del')
      }
    }
	}
</script>

<style lang="scss">
  .count {
    display: flex;
    width: 140rpx;
    justify-content: space-between;
    align-items: center;
    
    .btn {
      width: var(--size);
      height: var(--size);
      
      --size: 40rpx;
      
      &.jian {
        background: url(../../../static/icons/jianhao.png) center / cover no-repeat;
      }
      
      &.jia {
       background: url(../../../static/icons/jiahao-0.png) center / cover no-repeat;
      }
      
      &.jia.on {
       background: url(../../../static/icons/jiahao-1.png) center / cover no-repeat;
      }
    }
  }
</style>
